/**
 * Created by Kylin on 2016/12/6.
 */
import React, {Component} from 'react';
import Content from '../../../public/common/Content';

export default class ReduxItro extends Component {
    render() {
        return (
            <Content>
                <div className="page__hd">
                    <h1 className="page__title">Redux</h1>
                    <div className="page__desc">
                        <p>Redux 是 JavaScript 状态容器，提供可预测化的状态管理。其设计思想是</p>
                        <ol style={{marginLeft: '1rem'}}>
                            <li>Web 应用是一个状态机，视图与状态是一一对应的。</li>
                            <li>所有的状态，保存在一个对象里面。</li>
                        </ol>
                        <br/>
                        <h2>使用场景</h2>
                        <h3>不需要引入</h3>
                        <ul style={{listStyle: 'circle', marginLeft: '1rem'}}>
                            <li>用户的使用方式非常简单</li>
                            <li>用户之间没有协作</li>
                            <li>不需要与服务器大量交互，也没有使用 WebSocket</li>
                            <li>视图层（View）只从单一来源获取数据</li>
                        </ul>
                        <p>如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。</p>
                        <h3>需要引入</h3>
                        <p><b>多交互、多数据源</b></p>
                        <ul style={{listStyle: 'circle', marginLeft: '1rem'}}>
                            <li>用户的使用方式复杂</li>
                            <li>不同身份的用户有不同的使用方式（比如普通用户和管理员）</li>
                            <li>多个用户之间可以协作</li>
                            <li>与服务器大量交互，或者使用了WebSocket</li>
                            <li>View要从多个来源获取数据</li>
                        </ul>
                        <p><b>组件角度</b></p>
                        <ul style={{listStyle: 'circle', marginLeft: '1rem'}}>
                            <li>某个组件的状态，需要共享</li>
                            <li>某个状态需要在任何地方都可以拿到</li>
                            <li>一个组件需要改变全局状态</li>
                            <li>一个组件需要改变另一个组件的状态</li>
                        </ul>
                        <br/>
                        <h2>三大原则</h2>
                        <p>Redux 可以用这三个基本原则来描述：</p>
                        <h3>单一数据源</h3>
                        <p>整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。</p>
                        <h3>State 是只读的</h3>
                        <p>惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。</p>
                        <h3>使用纯函数来执行修改</h3>
                        <p>使用纯函数描述 action 如何改变 state tree ，因此需要编写 reducers。</p>
                    </div>
                </div>
            </Content>
        );
    }
};
module.exports = ReduxItro;

const ReduxItroNav = React.createClass({
    render(){
        return (
            <div className="Z_panel-body">

            </div>
        )
    }
});